// 1获取元素

var box = document.getElementById("box");

// 伪数组和数组的区别,就是伪数组没有数组方法

var screen = box.children[0];
var ul = screen.children[0];
var ol = screen.children[1];
var lisUl = ul.children;
// 获取一下图片的宽度
// var imgwid = screen.offsetWidth;
var imgWid = screen.offsetWidth;

// 获取左右按钮
var arr =  box.children[1];
var arrLeft = arr.children[0];
var arrRight = arr.children[1];

var box = document.getElementById("box");
//伪数组和数组的区别，就是伪数组没有数组方法
var screen = box.children[0];
var ul = screen.children[0];
var ol = screen.children[1];
var lisUl = ul.children;
//获取图片宽度
var imgWid = screen.offsetWidth;
//获取左右按钮
var arr = box.children[1];
var arrLeft = arr.children[0];
var arrRight = arr.children[1];

// 2.根据lisUl中的元素的个数设置ol中的 li 创建
for(var i=0; i<lisUl.length; i++){
    //3.创建一个li
    var li = document.createElement("li");
    //4放入ol中
    ol.appendChild(li);
    //5.设置li的内容
    li.innerHTML = i + 1;
}


// 6.设置点击按钮效果
// 先设置第一个ol中的li突出显示
var lisOl = ol.children;
lisOl[0].className = "current";



//7定义点击事件

for(var i = 0; i<lisOl.length; i++){
    //11 设置索引值
    // lisOl[i].index = 1;
    lisOl[i].index = i;
    lisOl[i].onclick = function(){
        // 如果当先现实的是假的第一张,再次点击方块 进行抽回
        if(pic == lisUl.length -1){
            ul.style.left = 0 + "px";
        }
        // 8.点击按钮变色
        for(var j=0;j<lisOl.length;j++){
            lisOl[j].className = "";
        }
        //9.设置自己
        this.className = "current";
        // 10根据 ul 点击的按钮进行运动
        //根据当前按钮的索引
        animate(ul,-this.index * imgWid);
        // 14让左右按钮的pic值根据当前点击的小方块索引同步
        pic = this.index
    };
}



var firstPic = lisUl[0].cloneNode(true);
ul.appendChild(firstPic);
//声明一个变量去控制滚动过的图片张数
var pic = 0;
//12.点击有按钮
arrRight.onclick = function () {
    // 如果当前显示的是假的第一张,这时就不能直接滚动了
    //先抽回.然后在进行一次滚动
    if(pic == lisUl.length - 1){
        ul.style.left = 0 +"px";
        //设置pic的0值归位
        pic = 0;
    }
    // 让pic的值进行改变
    pic++;
    // 根据pic的值让ul进行滚动
    animate(ul,-pic * imgWid);
    //15 点击左右按钮的时候,让下面的小方块进行变色
    for(var i = 0;i<lisOl.length;i++){
        lisOl[i].className="";
    }
    
    //当我们使用pic作为索引值当时候,pic的值就会比索引值多一个
    //当页面显示假的第一张的时候,应该让lisOl[0]设置类名
    // 使用pic作为索引 ,让对应的小方块显示
    if(pic == lisUl.length-1){
        lisOl[0].className = "current";
    }else{
        lisOl[pic].className = "current";
    }
    
}



//13.点击左边按钮
arrLeft.onclick = function (){
    // 如果pic为0 就是现实第一张的时候,如果再次点击做按钮.需要讲ui抽回第一张现实的位置
    if(pic == 0){
        ul.style.left = -(ul.offsetWidth - imgWid) + "px";
        pic = lisUl.length -1;
    }
    //pic的值进行减少
    pic--;
    animate(ul,-pic * imgWid);

    //设置变色
    for(var i = 0; i<lisOl.length;i++){
        lisOl[i].className = "";
    }
    //不会看真正的假的第一张
    lisOl[pic].className = "current";
}



// 自动滚动
var timer = null;
timer = setInterval(function (){
    //处罚有按钮点击事件
    arrRight.click();
    // 注意 不要让运行的时间太短,不然太快了
},1500)
//移入移出效果
box.onmouseover = function(){
    arr.style.display = "block";
    // 自动播放停止
    clearInterval(timer);
}
box.onmouseout = function(){
    arr.style.display = "none";
    //将开启定时器id保存在timer内部
    timer = setInterval(function (){
        arrRight.click();
    },1500)
}



function animate(tag,target){
    // 将定时器设置在tag的自定义属性上
    clearInterval(tag.timer);
    //设置定时器,进行运动
    tag.timer = setInterval(function () {
        // 获取初始化位置
        var leader = tag.offsetLeft;
        // 设置步长
        var step = 9;
        // 根据leader和target的大小关系 去设置step的正负
        step = leader > target ? -step : step;
        if(Math.abs(leader - target) > Math.abs(step)){
            // 套用公式
            leader = leader + step;
            //将新的位置设置给元素.进行运动
            tag.style.left = leader + "px";
        }else{
            // 直接走到指定位置
            tag.style.left = target + "px";
            //到达指定位置清除定时器
            clearInterval(tag.timer);
        }
    },17)
}
